<template>
  <div class="app-container">
    <!-- 操作查询面板 -->
    <div class="inquire-top">
      <!-- 控制 -->
      <div class="inquire-button">
        <!-- 按钮 -->
        <div class="search-condition">
          <!-- <div class="condition"> -->
          <el-row :gutter="24">
            <el-col :span="4">
              <el-input v-model="listQuery.name" style="width: 120px;" size="small" placeholder="姓名" />
            </el-col>
            <el-col :span="4">
              <el-input v-model="listQuery.mobile" style="width: 120px;" size="small" placeholder="手机号" />
            </el-col>
            <el-col :span="4">
              <el-input v-model="listQuery.motorcadeName" style="width: 120px;" size="small" placeholder="车队名称" />
            </el-col>
            <el-col :span="4">
              <el-input v-model="listQuery.identityCardId" style="width: 130px;" size="small" placeholder="身份证号码" />
            </el-col>
            <el-col :span="2">
              <el-button type="primary" size="small" @click="handleAdd()">新增</el-button>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" size="small">导出</el-button>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" size="small" @click="resetBlick()">重置</el-button>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" size="small" @click="handleSearch()">查询</el-button>
            </el-col>
            <!-- </div> -->
          </el-row>
        </div>
      </div>
    </div>
    <!-- 车辆状态  标签页-->
    <div class="vehicle-state">
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        border
        stripe
        fit
        highlight-current-row
        style="width: 100% margin-top:20px"
      >
        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="50"
        />
        <el-table-column label="创建时间" min-width="110px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{
              row.createdTime
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="姓名" min-width="110px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{
              row.name
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机号" min-width="150px" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.mobile }}</span>
          </template>
        </el-table-column>
        <el-table-column label="车队名称" min-width="150px" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.motorcadeName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="所收税点" min-width="150px" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.taxPoint }}</span>
          </template>
        </el-table-column>
        <el-table-column label="身份证号码" min-width="150px" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.identityCardId }}</span>
          </template>
        </el-table-column>
        <el-table-column label="审核时间" min-width="150px" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.auditTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="审核状态" min-width="150px" align="center">
          <template slot-scope="{ row }">
            <span v-if=" row.auditStatus == 'PENDING' ">未审核</span>
            <span v-if=" row.auditStatus == 'SUCCESS' ">审核通过</span>
            <span v-if=" row.auditStatus == 'FALL' ">审核不通过</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="230"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{ row }">
            <el-button type="danger" size="mini" @click="handleDelete(row)">
              删除
            </el-button>

            <el-button
              v-if="row.status != 'deleted'"
              size="mini"
              type="primary"
              @click="handleDetails(row)"
            >
              详情
            </el-button>

          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.current"
        :limit.sync="listQuery.size"
        @pagination="getList"
      />

    </div>
    <!-- 引用子组件 -->
    <!-- <details-or-update v-if="detailsVisible" ref="detailsOrUpdateRef" :details-visible="detailsVisible" :row-data-array="rowDataArray" :row-data="rowData" @changeShow="showAddOrUpdate" /> -->
    <!-- <audit-or-update v-if="auditVisible" ref="auditOrUpdateRef" :audit-visible="auditVisible" :audit-row-data-array="auditRowDataArray" :audit-row-data="auditRowData" @changeShow="showAddOrUpdate" /> -->
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { driverMasterList, driverMasterDelete } from '@/api/tms/driverMaster'
export default {
  name: 'Index',
  components: {
    Pagination
  },
  data() {
    return {
      list: [],
      tableKey: 0,
      listLoading: true,
      listQuery: {
        current: 1,
        size: 20,
        name: '',
        mobile: '',
        identityCardId: '',
        motorcadeName: '',
        auditStatuses: []
      },
      total: 0,
      header: [
        {
          title: '全部',
          name: 'ALL'
        }, {
          title: '未审核',
          name: 'PENDING'
        }, {
          title: '审核通过',
          name: 'SUCCESS'
        }, {
          title: '审核不通过',
          name: 'FALL'
        }
      ],
      activeName: 'ALL',
      isshow: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 处理删除选项
    handleDelete(row) {
      const arr = []
      arr.push(row.id)
      console.log(arr)
      const data = {
        'ids': arr
      }
      driverMasterDelete(data).then(() => {
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
        this.getList()
      })
    },
    // 重置
    resetBlick() {
      this.listQuery = {
        current: 1,
        size: 20,
        name: '',
        mobile: '',
        identityCardId: '',
        motorcadeName: '',
        auditStatuses: []
      }
    },
    handleAdd() {
      this.$router.push('/resourceManager/captainList/add')
    },
    // 点击 详情
    handleDetails(row) {
      this.$router.push({ path: `/resourceManager/captainList/detail/${row.id}` })
    },
    getList() {
      driverMasterList(this.listQuery).then((response) => {
        console.log('车队长列表', response.records)
        this.list = response.records
        this.total = response.total
        this.listLoading = false
      })
    },
    inquireBotton() {
      this.isshow = !this.isshow
    },
    handleClick(e) {
      console.log(e)
      if (e.name === 'ALL') {
        this.listQuery.auditStatuses = []
      } else {
        this.listQuery.auditStatuses = [e.name]
      }
      this.getList()
    },
    handleSearch() {
      this.listQuery.current = 1
      this.getList()
    }

  }
}

</script>
<style lang="scss" scoped>
.vehicle-state{
  padding-top: 30px;
}
  .inquire-top{
    border: 1px solid #e4e4e4;
  }
  .inquire-button{
    width: 100%;
    height: 50px;
    display: flex;
    align-items:center;
    /* border: 1px solid #e4e4e4; */
  }
  .search-condition{
    display: flex;
    justify-content:flex-end;
    flex-wrap: nowrap ;
    width: 100%;
  }
  .search-input{
    width: 100%;
    display: flex;
    align-items:center;
  }
</style>
